<template>
  <div>
    <!-- 大图 -->
    <div v-for="(item,index) in diet" :key="index">
      <img :src="item.img1" alt class="imgs" />
    </div>

    <div class="imgss">
      <p class="font">健身美食餐</p>
    </div>
    <!-- 小图 -->
    <div class="small">
      <div class="small-left" v-for="(item,index) in small" :key="index">
        <div class="small-left-top">
          <img :src="item.images" alt />
        </div>
        <div class="small-left-button">
          <div class="title-icon">
            <div class="ren">
              <img :src="item.titleImg" alt />
            </div>
            <span>{{item.name}}</span>
          </div>
          <p class="ps">{{item.content}}</p>
          <div class="Icons">
            <span class="icon iconfont IconXins">&#xe602;</span>
            <span class="zi">403</span>
            <span class="icon iconfont IconPinglun">&#xe603;</span>
            <p class="IconPinglun-p2">26</p>
          </div>
        </div>
        <div class="kong"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      diet: [],
      small: []
    };
  },
  mounted() {
    this.api.GetYs().then(data => {
      // console.log(data.data.yinshi);
      this.diet = data.data.yinshi;
    });
    this.api.GetYss().then(data => {
      //console.log(data);
      this.small = data.data.yinshis;
    });
  }
};
</script>

<style lang="less" scoped>
.box {
  background: #f5f5f5;
}

.imgs {
  width: 100%;
  height: 4.2rem;
  margin: 0;
  padding: 0;
}
.font {
  margin-left: 0.2rem;
  font-size: 16px;
  color: #000;
  padding: 0.2rem 0;
}
.small {
  width: 96%;
  height: 6rem;
  // background: #eee;
  margin: 0 auto;
  position: relative;

  .small-img:last-child {
    margin-right: 0;
  }
  .small-left:last-child{
   
  position: absolute;

  top: 0;
  right: -0.2rem;
  }
  .small-left {
    float: left;
    width: 48.5%;
    height: 100%;
    // background: pink;
    float: left;
    margin-right: 0.2rem;
    float: left;
    .small-left-top {
      width: 100%;
      height: 53%;
      background: rgb(189, 190, 187);
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .small-left-button {
      width: 100%;
      height: 47%;
      // background:greenyellow;
      .title-icon {
        width: 100%;
        height: 0.8rem;
        background: #eee;
        overflow: hidden;
        position: relative;
        .ren {
          width: 0.6rem;
          height: 0.6rem;
          background: indianred;
          border-radius: 50%;
          margin-top: 0.1rem;
          overflow: hidden;
          img {
            width: 100%;
            height: 100%;
          }
        }
        span {
          font-size: 14px;
          color: #888;
          position: absolute;
          top: 0.2rem;
          left: 0.9rem;
        }
      }
      .ps {
        font-size: 16px;
        margin: 0.1rem 0;
        text-overflow: ellipsis;
        display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
        -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
        -webkit-line-clamp: 2; /** 显示的行数 **/
        overflow: hidden; /** 隐藏超出的内容 **/
      }
      .Icons {
        width: 100%;
        // background: red;
        height: 1rem;
        position: relative;
        .IconXins {
          position: absolute;
          top: 0.1rem;
          color: grey;
          font-size: 0.6rem;
        }
        .zi {
          font-size: 12px;
          position: absolute;
          top: 0.25rem;
          left: 0.7rem;
        }
        .IconPinglun {
          font-size: 0.6rem;
          position: absolute;
          top: 0.1rem;
          right: 0.5rem;
          color: #666;
        }
        .IconPinglun-p2 {
          font-size: 14px;
          color: #666;
          position: absolute;
          top: 0.2rem;
          right: 0.1rem;
        }
      }
    }
    .kong {
      width: 100%;
      height: 2rem;
    }
  }
 
}
</style>